<template>
	<view class='corp-container' v-if='visibleSync' :style="{height: setting.windowHeight + 'px'}" @click.stop="touchCorpPopup">
		<view class='corp-header' :style="{padding: setting.statusBarHeight + 'px 0px 10px 0px'}">
			<view class='corp-wrapper' :style="{height: setting.topMenuHeight + 'px'}">
				<view class='corp-left' @click.stop="hide">
					<uni-icons type='left' size='20' :color='setting.corw' v-if='corpFuncSelected=="filter"'></uni-icons>
				</view>
				<view class='corp-middle'>
					<view class='corp-next' v-if='corpFuncSelected=="filter"' :style="{backgroundColor: headcolor}" @click="saveCropResult">{{headtitle}}</view>
				</view>
				<view class='corp-right'>
					// #ifndef MP
					<view class='corp-icon'>
						<uni-icons type='more-filled' size='20' :color='scrollListFlag ? setting.corfb : setting.corw'></uni-icons>
					</view>
					// #endif
				</view>
			</view>
		</view>
		<view class='corp-box' v-if='corpFuncSelected=="filter"'>
			<view class='corp-images'>
				<swiper :current='imageCurrent' class='image-list' @change='changeImage' duration="500" 
					:style="{height: setting.windowHeight * 3 / 5 + 'px'}" :vertical="false">
					<swiper-item v-for="(img, imgIndex) in imageList" :key="imgIndex" class='image-wrapper'>
						<image :src='img.image' mode="heightFix" class="image-handle" :style="{height: setting.windowHeight * 3 / 5 + 'px'}"></image>
					</swiper-item>
				</swiper>
				<view class='corp-hint'>
					<text class='cor-white h2'>{{imageCurrent + 1}}/{{imageList.length}}</text>
				</view>
			</view>
			<view class='corp-effects'>
				<scroll-view class='effect-list' :scroll-x="true" :scroll-y="false" :style="{height: effectSize + 10 + 'px'}">
					<view class='effect-item' v-for="(effect, effectIndex) in effectList" :key="effectIndex" 
						:style="{width: effectSize + 'px', height: effectSize + 'px'}" @click="checkEffect" :data-index='effectIndex'>
						<view class='effect-image'>
							<image :src='effect.sample' mode='center' class='image-icon' :class='effectCurrent==effectIndex?"active":""'></image>
						</view>
						<view class='effect-name' :class='effectCurrent==effectIndex?"cor-o":""'>
							<view class='effect-shadow'>{{effect.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class='corp-funcs'>
				<view class='corp-func' data-func='filter' @click='checkFunc'>
					<view class='corp-func-icon'>
						<image src='/components/cscorp/image/ico-filter-white.png' mode='widthFix' class='i3' v-if='corpFuncSelected!="filter"'></image>
						<image src='/components/cscorp/image/ico-filter-orange.png' mode='widthFix' class='i3' v-if='corpFuncSelected=="filter"'></image>
					</view>
					<view class='corp-func-name' :class='corpFuncSelected=="filter"?"cor-o":""'>滤镜</view>
				</view>
				<view class='corp-func' data-func='cut' @click='checkFunc'>
					<view class='corp-func-icon'>
						<image src='/components/cscorp/image/ico-cut-white.png' mode='widthFix' class='i3' v-if='corpFuncSelected!="cut"'></image>
						<image src='/components/cscorp/image/ico-cut-orange.png' mode='widthFix' class='i3' v-if='corpFuncSelected=="cut"'></image>
					</view>
					<view class='corp-func-name' :class='corpFuncSelected=="cut"?"cor-o":""'>裁剪</view>
				</view>
			</view>
		</view>
		<view class='container' :style='{width: setting.windowWidth + "px"}' v-if='corpFuncSelected=="cut"'>
			<view class='cropper'>
				<bt-cropper ref="cropper" :ratio="ratioCurrent==-1?0:ratioList[ratioCurrent].width/ratioList[ratioCurrent].height" 
					:dWidth="cropSize" :imageSrc="cutImage"  fileType="png" 
					:showGrid='config.cutShowGrid' :mask="config.cutMask" :autoZoom='config.cutAutoZoom' :rotate="config.cutRotate"></bt-cropper>
			</view>
			<view class="cut-func">
				<scroll-view :scroll-x="true" class="cut-settings">
					<view class='cut-setting-item' :data-index='-1' @click.stop="checkRatio">
						<image src='/components/cscorp/image/ico-pic-white.png' mode='widthFix' :style="{width: cutSettingImageSize + 'px'}" v-if='ratioCurrent!=-1'></image>
						<image src='/components/cscorp/image/ico-pic-orange.png' mode='widthFix' :style="{width: cutSettingImageSize + 'px'}" v-if='ratioCurrent==-1'></image>
						<text class="cut-setting-item-text" :class='ratioCurrent==-1?"active":""'>自由</text>
					</view>
					<block v-for="(ratio, ratioIndex) in ratioList" :key="ratioIndex">
						<view class='cut-setting-item' :data-index='ratioIndex' @click.stop="checkRatio">
							<view class='cut-setting-item-width' :class='ratioCurrent==ratioIndex?"active":""' :style="{width: cutSettingImageSize + 'px', height: ratio.height * cutSettingImageSize / ratio.width + 'px'}"></view>
							<text class="cut-setting-item-text" :class='ratioCurrent==ratioIndex?"active":""'>{{ratio.width}}:{{ratio.height}}</text>
						</view>
					</block>
				</scroll-view>
				<view class='cut-func-btnbar'>
					<view class='cut-func-btn' @click="closeCut">
						<image src='/components/cscorp/image/ico-close-white.png' mode='widthFix' class='i3'></image>
					</view>
					<view class='cut-func-btn' @click="rotateCut">
						<image src='/components/cscorp/image/ico-rotate-white.png' mode='widthFix' class='i3'></image>
					</view>
					<view class='cut-func-btn' @click="checkAutoZoom">
						<image src='/components/cscorp/image/ico-zoom-white.png' mode='widthFix' class='i3' v-if='!config.cutAutoZoom'></image>
						<image src='/components/cscorp/image/ico-zoom-orange.png' mode='widthFix' class='i3' v-if='config.cutAutoZoom'></image>
					</view>
					<view class='cut-func-btn' @click="checkGrid">
						<image src='/components/cscorp/image/ico-grid-white.png' mode='widthFix' class='i3' v-if='!config.cutShowGrid'></image>
						<image src='/components/cscorp/image/ico-grid-orange.png' mode='widthFix' class='i3' v-if='config.cutShowGrid'></image>
					</view>
					<view class='cut-func-btn' @click="confirmCut">
						<image src='/components/cscorp/image/ico-right-white.png' mode='widthFix' class='i3'></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import effective from '@/lib/effective.js';
	
	export default {
		props: {
			maxcount: {
				type: Number,
				default: 9
			},
			headtitle:{
				type: String,
				default: '完成'
			},
			headcolor:{
				type: String,
				default: '#FFFFFF'
			},
		},
		data() {
			return {
				setting: {},
				visibleSync: false,
				slideUpAnimation: null,
				corpFuncSelected: 'filter', //filter - 滤镜 cut-裁剪
				effectCurrent: 0,
				imageCurrent: 0,
				effectSize: 0,
				containerSize: 300,
				cutSettingImageSize: 28,
				cutImage: '',
				cropSize: 300,
				ratioCurrent: 0,
				config: {cropSize: 300, cutRotate: 0, cutShowGrid: false, cutMask: "", cutAutoZoom: false},
				effectList: [
					{name: '原图', sample: '/static/image/test/1.jpg', type: 'a'},
					{name: '黑白调', sample: '/static/image/test/2.jpg', type: 'b'},
					{name: '灰色调', sample: '/static/image/test/3.jpg', type: 'c'},
					{name: '反转', sample: '/static/image/test/4.jpg', type: 'd'},
					{name: '红色蒙版', sample: '/static/image/test/5.jpg', type: 'e'},
					{name: '增加亮度', sample: '/static/image/test/6.jpg', type: 'f'},
					{name: '浮雕', sample: '/static/image/test/7.jpg', type: 'g'},
					{name: '雾化', sample: '/static/image/test/8.jpg', type: 'h'},
					{name: '毛玻璃', sample: '/static/image/test/8.jpg', type: 'i'}
				],
				imageList:[],
				ratioList: [{
					width: 1,
					height: 1,
				}, {
					width: 4,
					height: 5,
				},{
					width: 9,
					height: 16,
				}, {
					width: 3,
					height: 4,
				}, {
					width: 2,
					height: 3,
				}, {
					width: 5,
					height: 4,
				},{
					width: 16,
					height: 9,
				}, {
					width: 4,
					height: 3,
				}, {
					width: 3,
					height: 2,
				}]
			}
		},
		mounted(){
			var that = this;
			gui.init(this);
			this.effectSize = this.setting.windowWidth / 4;
			this.cropSize = (this.setting.windowWidth)<(this.setting.windowHeight * 2 / 3) ? (this.setting.windowWidth) : (this.setting.windowHeight * 2 / 3)
		},
		methods: {
			
			saveCropResult(){
				this.$emit('save', this.imageList);
				this.hide();
			},
			
			show(){
				var that = this;
				uni.chooseImage({
					count: this.maxcount,
					success:(res)=> {
						if(res.tempFilePaths!=null && res.tempFilePaths.length>0){
							var arr = [];
							for(var i=0; res.tempFilePaths!=null && i<res.tempFilePaths.length; i++){
								arr.push({image: res.tempFilePaths[i]});
							}
							that.imageList=arr;
							that.ratioCurrent=0;
							that.config.cutRotate=0;
							that.visibleSync=true;
							that.corpFuncSelected='filter';
						}
					}
				})
			},
			
			hide(){
				this.visibleSync=false;
			},
			
			checkEffect(e){
				this.effectCurrent=e.currentTarget.dataset.index;
				console.log(this.effectList[this.effectCurrent]);
				console.log(this.imageList[this.imageCurrent]);
				/* filter(this.imageList[this.imageCurrent].image, this.effectList[this.effectCurrent].type).then(res=>{
					console.log(res);
				}) */
			},
			
			checkFunc(e){
				var that = this;
				that.corpFuncSelected=e.currentTarget.dataset.func;
				if(that.corpFuncSelected == 'cut'){
					that.cutImage=decodeURIComponent(that.imageList[that.imageCurrent].image);
					var handler = setInterval(()=>{
						if(that.$refs.cropper){
							that.$refs.cropper.imageInit(that.cutImage);
							clearInterval(handler);
						}
					}, 100);
				}else{
					that.cutImage=null;
				}
			},
			
			checkRatio(e){
				this.ratioCurrent=e.currentTarget.dataset.index;
			},
			
			checkAutoZoom(){
				this.config.cutAutoZoom=!this.config.cutAutoZoom;
			},
			
			checkGrid(){
				this.config.cutShowGrid=!this.config.cutShowGrid;
			},
			
			closeCut(){
				this.corpFuncSelected='filter';
				this.ratioCurrent=0;
			},
			
			rotateCut(){
				this.config.cutRotate = this.config.cutRotate + 90;
			},
			
			confirmCut(){
				var that = this;
				console.log(this.$refs);
				this.$refs.cropper.crop().then(path => {
					that.imageList[that.imageCurrent].image=path;
					that.corpFuncSelected='filter';
				})
			},
			
			changeImage(e){
				this.imageCurrent=e.detail.current;
			}
		}
	}
</script>

<style>
	.corp-container{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #000;
		z-index: 99999;
		position:fixed;
		top: 0px;
		left: 0px;
	}
	
	.corp-header{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.corp-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: calc( 100% - 20px );
		padding-left: 10px;
		height: 40px;
	}
	
	.corp-left{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 15%;
	}
	
	.corp-middle{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 70%;
	}
	
	.corp-next{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 4px 15px;
		border-radius: 15px;
		background-color: #f39801;
		color: #000;
		font-weight: bold;
		font-size: 14px;
	}
	
	.corp-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 15%;
		
	}
	
	.corp-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.corp-images{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}
	
	.image-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.image-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.image-handle{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.corp-hint{
		position: absolute;
		right: 10px;
		bottom: 10px;
		background-color: rgba(0,0,0,0.5);
		padding: 5px 10px;
		border-radius: 10px;
	}
	
	.corp-effects{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 15px 0px;
	}
	
	.effect-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: calc( 100% - 15px );
		flex-wrap: nowrap;
		white-space: nowrap;
		margin-left: 15px;
	}
	
	.effect-item{
		display: inline-flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 30%;
		position: relative;
		margin-right: 15px;
	}
	
	.effect-image{
		width: 100%;
		height: 100%;
	}
	
	.image-icon{
		width: 100%;
		height: 100%;
		border-radius: 10px;
		border: 2px solid #333;
	}
	
	.image-icon.active{
		border: 2px solid #f39801;
	}
	
	.effect-name{
		position: absolute;
		bottom: 2px;
		right: 0px;
		color: #fff;
		font-size: 12px;
	}
	
	.effect-shadow{
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
		padding: 4px 10px;
		width: fit-content;
	}
	
	.corp-funcs{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}
	
	.corp-func{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.corp-func-icon{
		padding-bottom: 4px;
	}
	
	.corp-func-name{
		font-size: 12px;
		color: #fff;
	}

	.cut-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}
	
	.container {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		// #ifndef H5
		height: 100vh;
		// #endif
		// #ifdef H5
		height: 100%;
		// #endif
		background-color: #000;
	}
	
	.cropper{
		flex: 1;
	}
	
	uni-page-body {
		height: 100%;
	}
	
	.cut-func{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.cut-settings{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0px 0px;
		white-space: nowrap;
		flex-wrap: nowrap;
	}
	
	.cut-setting-item{
		display: inline-flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 20%;
	}
	
	.cut-setting-item-width{
		border: 2px solid #fff;
	}
	
	.cut-setting-item-width.active{
		border: 2px solid #f39801;
	}
	
	.cut-setting-item-text{
		font-size: 12px;
		color: #fff;
		padding-top: 10px;
	}
	
	.cut-setting-item-text.active{
		color: #f39801;
	}
	
	.cut-func-btnbar{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		padding: 20px 0px;
	}
	
	.cut-func-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 20%;
		color: #fff;
		font-size: 14px;
	}
</style>
